<template>
  <div>

    <el-table
      :data="userList"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        v-loading="loading"
        align="center"
        label="编号"
        width="65"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="性别"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.sexC }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="年龄"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <!--
      <el-table-column
        min-width="300px"
        label="主要病症"
      >
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column> -->

      <el-table-column
        width="120px"
        label="就诊次数"
      >
        <template slot-scope="{row}">
          <span>{{ row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="消费金额"
        width="95"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="创建时间"
        width="200"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="状态"
        width="110"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.level }}级会员
            <!-- 普通会员 -->
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="$store.state.user.roles === 'admin'"
        align="center"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEditUser(scope)"
          >修改</el-button>
          <!-- <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope)"
          >删除</el-button> -->
        </template>
      </el-table-column>
      <el-table-column
        v-if="$store.state.user.roles === 'admin' || $store.state.user.roles === 'doctor'"
        align="center"
        label="详情"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope)"
          >撰写病例</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      class="pagination"
      :current-page="pageNum"
      :page-size="pageSize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getUser, addUser, updataUser } from '@/api/user'
import { sexC } from '@/utils/role'
import { timestampToTime } from '@/utils/time'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    type: {
      type: String,
      default: 'CN'
    }
  },

  data() {
    return {
      userList: [],
      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: '+id'
      },
      pageNum: 1, // 默认每页显示1条数据
      pageSize: 10,
      loading: false,
      totalCount: 0
    }
  },
  created() {
    this.getUser({
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      queryStatic: 1
    })
  },
  methods: {
    async getUser(data) {
      const res = await getUser(data)
      console.log(res)
      const list = res.data.list
      for (const i in list) {
        list[i].sexC = sexC(list[i].sex)
        list[i].createTime = timestampToTime(list[i].createTime)
        list[i].key = i
      }
      this.userList = list
      this.totalCount = res.data.total
    },
    handleEdit(scope) {
      this.$emit('toDetailUser', scope)
    },
    handleEditUser(scope) {
      this.$emit('editUser', scope)
    },
    pushData(data) {
      this.userList.unshift(data)
    },
    handleSizeChange(page) {
      this.pageSize = page
      this.getUser({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleCurrentChange(page) {
      this.pageNum = page
      this.getUser({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }
  }
}
</script>

